<template>
  <div ref="dashboard-container" class="dashboard-container">
    <el-button type="primary" size="default" @click="doFullScreen">全屏</el-button>
    <pre style="color:#fff;"> {{ orderList }} </pre>
    <div>
      <countTo :start-val="startVal" :end-val="endVal" :duration="6000" />
    </div>
    <div id="main" class="main" />
    <!-- 订单退单图表 -->
    <div class="order-echart">
      <OrderReturnEchart />
    </div>
    <!-- 字符云 -->
    <div class="search-world">
      <HotSearchWorldEchart />
    </div>
    <div class="china-map">
      <ChinaMap />
    </div>
    <!-- 饼图 -->
    <div class="pie-echart">
      <PieEchart />
    </div>
    <div class="bg-animate">
      <DTLZ />
    </div>
    <!-- <div style="margin-top:500px" /> -->
  </div>
</template>

<script>
import screenfull from 'screenfull'
import * as echarts from 'echarts'
import OrderReturnEchart from './components/OrderReturnEchart.vue'
import HotSearchWorldEchart from './components/HotSearchWorldEchart.vue'
import ChinaMap from './components/ChinaMap.vue'
import PieEchart from './components/PieEchart.vue'
import DTLZ from './components/DTLZ.vue'
import countTo from 'vue-count-to'
export default {
  name: 'Dashboard',
  components: {
    OrderReturnEchart,
    countTo,
    HotSearchWorldEchart,
    ChinaMap,
    PieEchart,
    DTLZ
  },
  data() {
    return {
      startVal: 0,
      endVal: 3099997654,
      orderList: []
    }
  },
  computed: {

  },
  created() {
    this.getDataList()
  },
  mounted() {
    // 1. 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'))
    // 2. 准备option
    const option = {
      title: {
        text: '衬衫销量',
        textStyle: {
          color: '#f00',
          fontStyle: 'italic',
          fontSize: 40
        }
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        },
        {
          name: '销量2',
          type: 'line',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    }
    // 3.绘制图表
    myChart.setOption(option)
  },
  methods: {
    doFullScreen() {
      if (screenfull.isEnabled) {
        // screenfull.request()
        screenfull.toggle(this.$refs['dashboard-container'])
      }
    },
    getDataList() {
      var _this = this
      const source = new EventSource('http://localhost:9528/getlist')
      // readyState
      // 0 可能是第一次链接，也可能是断开链接了又重新链接，客户端和服务器正在链接，还没有链接上
      // 1 客户端和服务器链接上了，就可以接受服务器数据
      // 2 彻底断开链接并且不在重连
      console.log('source==>', source)
      console.log(EventSource.CONNECTING) // 0
      console.log(EventSource.OPEN) // 1
      console.log(EventSource.CLOSED) // 2

      // open事件是 客户端和服务器链接上触发
      source.onopen = function(event) {
        console.log('onopen===>', event)
      }
      // message 事件 是服务器向客户度发送消息时触发
      source.onmessage = function(event) {
        console.log('onmessage===>', event)
        _this.orderList = JSON.parse(event.data)
      }
      // 是服务器和客户端 链接出错时触发
      source.onerror = function(event) {
        console.log('onerror===>', event)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container{
  background-color: #0a1631;
  .main{
    width: 400px;
    height: 300px;
  }
  .order-echart{
    margin: 0 auto;
    width: 800px;
    height: 400px;
    border: 1px solid red;
  }
  .search-world{
     margin: 30px auto;
    width: 600px;
    height: 400px;
    border: 1px solid red;
  }
  .china-map,.pie-echart{
     margin: 0px auto;
    width: 800px;
    height: 600px;
    border: 1px solid red;
  }
  .bg-animate{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 15%;
  }
}
</style>
